<template>
  <div>
    <van-nav-bar fixed title="星券列表" left-arrow @click-left="$utils.back($route.path);" />
		<div class="pt-110 pb-50">
				<div class="flex flex-v-c mg-24">
					<div class="mr-24 fs-32 choose-batch"><img src="../../assets/images/choose_batch.png" class="batchimg" /> 选择批次</div>
					<van-dropdown-menu title-class="drop" :overlay="false">
						<van-dropdown-item v-model="value0" :options="option1" @change="change1"></van-dropdown-item>
					</van-dropdown-menu>
				</div>
				<div class="mlr-24 pd-32 flex flex-sa-c br-12 nav_top color-white">
					<div class="tac">
						<p class="sharenum">{{ unclaimed }}</p>
						<p class="fs-28">可分享码数</p>
					</div>
					<div class="tac">
						<p class="sharenum">{{ claimed }}</p>
						<p class="fs-28">已分享码数</p>
					</div>
				</div>
				<van-tabs v-model:active="active" @change="tabChange" class="starlist">
					<van-tab :title="item.title" v-for="(item,index) in tabs" :key="index">
						<van-list class="mt-16" v-if="list && list.length > 0" v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
								@load="moreData">
								<div v-for="(items,index) in list" :key="index" class="flex flex-s-c star" v-if="item.status === 1">
									<div class="width-46"> <img-box class="is-60 flex-s-0 mr-10" :isBr50="isBr50" :img-url="items.UserFace" />{{ items.UserName }}</div>
									<div class="tac">{{ items.GiveTime }}</div>
								</div>
								<div v-for="(items,index) in list" :key="index" class="flex flex-s-c star" v-if="item.status === 0">
									<div>{{ items.CouponCode }}</div>
									<div class="share tac" @click="share(items)">分享</div>
								</div>
								<div v-for="(items,index) in list" :key="index" class="star" v-if="item.status === 2">
									{{ items.CouponCode }}
								</div>
						</van-list>
					</van-tab>
				</van-tabs>
			</div>
			<canvas id="my_canvas" width="800px" height="1422px" style="opacity: 0;"></canvas>
				
			<van-dialog v-model="posterShow" class="posterDiv color-white" :showConfirmButton="false">
				<SvgIcon icon-class="close" class="fs-70 pos-a closecss z-out" @goPage="posterShow = false" />
				<div style="width: 100%;"><img :src="final_img" class="newImage" v-if="final_img" id="newImage"></div>
			</van-dialog>
	</div>
</template>
<script>
import imgBox from 'components/imgBox'
import SvgIcon from 'components/SvgIcon'
import { GetBookHomeOrderPage } from 'api/physio'
import { GetDisCodePage,GetStarcouponBatchListByUser,GetImageTemplateImage } from 'api/starcoupon'
export default {
	components:{
		imgBox,SvgIcon
	},
	data(){
		return{
			isBr50: true,
			value0: 1,
			option1:[],
			tabs:[
				{
					title:'已领取',
					status:1,
				},
				{
					title:'未领取',
					status:0,
				},
				{
					title:'已过期',
					status:2,
				},
			],
			list: [],
			// 请求参数
			requestData: {
				PageIndex:1,
				PageSize: 10,
				status: 2,
				batchId: 0,
			},
			active:0,
			loading: false, // 加载load
      finished: false, // 无更多数据
			claimed: 0, //已分享码数
			unclaimed: 0, //可分享码数
			showAvatars: false,
			posterId: 0,
			poster_url: '',
			final_img: '',
			posterShow: false,
		}
	},
	created() {
		this.GetStarcouponBatchListByUser()
	},
  methods: {
		GetStarcouponBatchListByUser(){
			GetStarcouponBatchListByUser().then(res => {
				if(res.Data && res.Data.length > 0){
					this.requestData.batchId = res.Data[0].ID
					this.value0 = res.Data[0].ID
					this.poeterId = res.Data[0].ShareImageTemplateId
					res.Data.forEach((ele) => {
						const obj = {}
						obj.text = ele.Name
						obj.value = ele.ID
						this.option1.push(obj)
					})
					this.GetDisCodePage()
				}
			})
		},
		change1(e){
			this.list = []
			this.requestData.batchId = e
			this.requestData.PageIndex = 1
			this.GetDisCodePage()
		},
		tabChange(e){
			this.list = []
			this.requestData.isExpire = 0
			this.requestData.status = e
			if(e === 0){
				this.requestData.status = 2
			}else if(e === 2){
				this.requestData.status = 1
				this.requestData.isExpire = 1
			}
			this.requestData.PageIndex = 1
			this.GetDisCodePage()
		},
		share(item){
			if(this.poeterId === 0){
				this.$toast('暂无分享海报')
			}else{
				const obj = {}
				var ua = window.navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					wx.miniProgram.getEnv(function (res) {
						if (res.miniprogram) {
							// 小程序环境下逻辑
							obj.minApp = 0
						} else {
							//非小程序环境下逻辑
							obj.minApp = 1
						}
					});
				}else{
					obj.minApp = 2
				}
				obj.id = this.poeterId
				obj.type = 2
				obj.customQRCodeUrl = this.$LocalDomain + '/circle/#/deliveryCard?CouponCode=' + item.CouponCode + '&PwdCode=' + item.PwdCode
				GetImageTemplateImage(obj).then(res =>{
					if(res.Data){
						this.poster_url = res.Data
						this.replaceToImg()
					}
				})
				this.showAvatars = true
			}
		
		},
		
		// 上拉加载更多
		moreData() {
      this.requestData.PageIndex = this.requestData.PageIndex + 1
      this.GetDisCodePage()
    },
		GetDisCodePage(){
			const _this = this
			_this.loading = true
			GetDisCodePage(this.requestData).then(res => {
				if (_this.requestData.PageIndex >= res.Data.TotalAmout) {
            _this.finished = true
        } else {
          _this.finished = false
        }
				_this.loading = false
        if (res && res.Data && res.Data.Data.length > 0) {
          res.Data.Data.forEach(item => {
            item.show = false
            _this.list.push(item)
          })
        }
				this.claimed = res.Data.OtherData.Claimed
				this.unclaimed = res.Data.OtherData.Unclaimed
        if (_this.scollTop > 0) {
          document.body.scrollTo(0, _this.scollTop)
        }
      })
		},
		replaceToImg() {
			let that = this
     
			let canvas = document.getElementById('my_canvas')
			let ctx = canvas.getContext('2d')
			let img1 = new Image()
			// 处理跨域
			img1.crossOrigin = 'anonymous'
			//img1.src = require('../../assets/images/luyi-share.jpeg')
			img1.src = that.poster_url	
			console.log(img1,"二维码")
			img1.onload = function() {
				ctx.drawImage(img1, 0, 0, 800, 1422) // 背景图载入画板
				console.log("img1")
				that.final_img = canvas.toDataURL('image/png',1)
				that.posterShow = true
			}
    },
	}
}
</script>
<style lang="scss" scoped>
.drop{
	color: #fff;
}
/deep/.van-dropdown-menu{
	border: 1px solid #333;
	height: 40px;
	align-items: center;
	padding: 0px 15px;
	border-radius: 5px;
	width: 180px;
	overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
/deep/.van-dropdown-menu__bar{
	box-shadow:none;
	height: 40px !important;
	background: none;
}
/deep/.van-dropdown-menu{
	border: none;
	padding: 0;
}
/deep/.van-dropdown-item{
	left: 35% !important;
	right: 12px !important;
}
/deep/.van-cell__title{
	overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.width-46{
	width: 46%;
	display: flex;
	align-items: center;
}
.nav_top{
	background: $primary;
	border-radius: 24px 24px 0px 0px;
}
.sharenum{
	font-size: 48px;
}
.starlist{
	background: #fff;
	border-radius: 40px 40px 0px 0px;
	padding: 24px;
}

.star{
	background: #fff;
	padding: 32px;
	align-items: center;
}
.star:nth-child(2n+1){
	background: #F7F7F7;
}
.share{
	width: 170px;
	height: 64px;
	line-height: 64px;
	border-radius: 32px;
	border: 1px solid $primary;
	font-size: 28px;
	color: $primary;
}
.batchimg{
	width: 40px;
}
.choose-batch{
	padding-right: 24px;
	border-right: 1px solid #999;
}
.photos{
	width: 80%;
}
/deep/.closecss {
	top: 10px;
	right: 10px;
}
#my_canvas{
	position: fixed;
	left: -1600px;
}
</style>
